<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>秒杀活动</title>
    <script src="../static/static/vue.min.js"></script>
    <script src="../static/static/axios.min.js"></script>
    <!-- 本地引入lib-master -->
    <link rel="stylesheet" type="text/css" href="../static/lib-master/theme-chalk/index.css" />
    <script src="../static/lib-master/index.js" type="text/javascript" charset="utf-8"></script>
</head>

<body>
    <div id="app">
        <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
            <el-form-item>
                <el-input v-model="dataForm.key" placeholder="参数名" clearable></el-input>
            </el-form-item>
            <el-form-item>
                <el-button @click="getDataList()">查询</el-button>
            </el-form-item>
        </el-form>
        <el-table :data="dataList" border v-loading="dataListLoading" style="width: 100%;">
            <el-table-column prop="id" header-align="center" align="center" label="商品id">
            </el-table-column>
            <el-table-column prop="goodsName" header-align="center" align="center" label="商品名称">
                <template slot-scope="scope">
                    <a @click="toBuyGoods(scope.row.id)" style="text-decoration: none;">{{scope.row.goodsName}}</a>
                </template>
            </el-table-column>
            <el-table-column prop="goodsTitle" header-align="center" align="center" label="商品标题">
                <template slot-scope="scope">
                    <a @click="toBuyGoods(scope.row.id)" style="text-decoration: none;">{{scope.row.goodsTitle}}</a>
                </template>
            </el-table-column>
            <el-table-column prop="goodsDetail" header-align="center" align="center" label="商品详情">
                <template slot-scope="scope">
                    <a @click="toBuyGoods(scope.row.id)" style="text-decoration: none;">{{scope.row.goodsDetail}}</a>
                </template>
            </el-table-column>
            <el-table-column prop="goodsImg" header-align="center" align="center" label="商品图片">
                <template slot-scope="scope">
                    <img :src="scope.row.goodsImg" width="100px" height="100px" alt="网络延迟">
                </template>
            </el-table-column>
            <el-table-column prop="seckillPrice" header-align="center" align="center" label="秒杀价">
            </el-table-column>
            <el-table-column prop="stockCount" header-align="center" align="center" label="库存数量">
            </el-table-column>
            <el-table-column prop="startDate" header-align="center" align="center" label="秒杀开始时间">
            </el-table-column>
            <el-table-column prop="endDate" header-align="center" align="center" label="秒杀结束时间">
            </el-table-column>
            <el-table-column fixed="right" header-align="center" align="center" width="150" label="操作">
                <template slot-scope="scope">
                    <el-button type="text" size="small" @click="toBuyGoods(scope.row.id)">详情</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="pageIndex"
            :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="totalPage"
            layout="total, sizes, prev, pager, next, jumper">
        </el-pagination>
    </div>
</body>
<script>
    new Vue({
        el: "#app",
        data() {
            return {
                baseUrl: 'http://localhost:88/api',
                dataForm: {
                    key: ''
                },
                dataList: [],
                pageIndex: 1,
                pageSize: 10,
                totalPage: 0,
                dataListLoading: false,
                dataListSelections: [],
            }
        },
        created() {
            this.getDataList();
        },
        methods: {
            // 获取数据列表
            getDataList() {
                this.dataListLoading = true
                axios.get(`${this.baseUrl}/goods/seckillactivity/voList?page=${this.pageIndex}&size=${this.pageSize}&goodsName=${this.dataForm.key}`).then(({ data }) => {
                    if (data) {
                        this.dataList = data.page.list
                        this.totalPage = data.total
                    } else {
                        this.dataList = []
                        this.totalPage = 0
                    }
                    this.dataListLoading = false
                })
            },
            // 每页数
            sizeChangeHandle(val) {
                this.pageSize = val
                this.pageIndex = 1
                this.getDataList()
            },
            // 当前页
            currentChangeHandle(val) {
                this.pageIndex = val
                this.getDataList()
            },
            // 多选
            selectionChangeHandle(val) {
                this.dataListSelections = val
            },
            // 跳转秒杀详情
            toBuyGoods(goodsId) {
                location.href = './shop_seckill.html?goodsId=' + goodsId;
            }
        },
    })
</script>

</html>